<template>
	<view id="card">

		<!-- <text>{{courseRecommendData[0]}}</text> -->
		<u-card :title="title" padding="20" margin="0" :title-size="35" :foot-border-top="false">
			<view class="" slot="body">
				<view v-if="courseRecommendData.length != 0">
					<view class="u-body-item u-flex u-border-bottom u-col-between" v-for="(o, index) in courseRecommendData" :key="index">
						<!-- <navigator url="../course/courseDetails" hover-class="navigator-hover"> -->

						<u-row style="width: 100%; position: relative; font-size: 30rpx; margin-top: 20rpx; margin-bottom: 20rpx;" @tap="courseDetails(courseRecommendData[index].id)">
							<u-col :span="6" @tap="courseDetails(courseRecommendData[index].id)">
								<u-image border-radius="10" width="300rpx" height="200rpx" :src="courseRecommendData[index].courseImage"></u-image>
							</u-col>

							<u-col :span="6" @tap="courseDetails(courseRecommendData[index].id)">
								<!-- <u-row style="position: relative; top: 0px;"> -->
								<view style="position: absolute; top: 0rpx;">{{courseRecommendData[index].courseName}}</view>
								<view style="position: absolute; top: 80rpx; color: #bfc4cb; font-size: 25rpx;">{{courseRecommendData[index].schoolName}}</view>
								<!-- </u-row>j -->
								<!-- <u-row> -->
								<view style="position: absolute; bottom: 10rpx; color: #bfc4cb; font-size: 25rpx;">
									<!-- <image src="../../../static/teacherHeadFill.png" style="width: 30rpx; height: 35rpx; position: absolute; bottom: 0rpx;"/> -->
									<u-icon name="account"></u-icon>
									<text>教师： {{courseRecommendData[index].courseTeacher}}</text>
								</view>
								<!-- </u-row> -->
							</u-col>

						</u-row>
						<!-- </navigator> -->
					</view>
				</view>
				<view v-else>
					<u-loading style="margin-left: 315rpx;" size="60"></u-loading>
				</view>

			</view>
		</u-card>

		<!-- <button @top ="trya()">asd</button> -->
	</view>
</template>

<script>
	import {
		getCourseRecommand
	} from "@/api/modules/home.js"
	export default {
		props: {
			courseRecommendData: Array,
			title: String
		},
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			// 点击某个详细的课程
			courseDetails(params) {
				// console.log(params)
				uni.navigateTo({
					url: '../joinCourse/joinCourse?courseID=' + params
				});
			},
		}
	}
</script>

<style scoped>
	#teacher uni-text {
		margin-bottom: 10rpx;
	}

	#card {
		/* position:absolute; */
		padding-left: 0rpx;
	}

	.u-body-item {
		font-size: 20rpx;
		color: #020202;
		padding: 10rpx 10rpx;
		border-color: #FFFFFF;
	}

	#name {
		font-size: 30rpx;
		position: absolute;
		left: 100px;
		top: 5px;
		padding: 0px;
		margin: 0px
	}

	#teacher image {
		height: 30rpx;
		width: 30rpx;
		bottom: 0rpx;
	}

	#teacher {
		position: absolute;
		bottom: 10px;
		padding: 0px;
		margin: 0px;
		left: 100px;
	}

	.u-body-item image {
		width: 280rpx;
		height: 180rpx;
		border-radius: 8rpx;
		margin-right: 12rpx;
	}
</style>
